<script setup lang="ts" name="labels">
import MenuBar from '@/views/components/menuBar/index.vue'
import AddModal from './components/add-modal/index.vue'
import { createUUID } from '@/utils/ruoyi'
import lodash from 'lodash'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

/*========================================>( 模板属性 )<========================================*/

//标题栏菜单
const menuBarMenus = ref<Array<any>>([
  {
    name: '添加',
    icon: 'add',
    mark: 'add'
  }
])

//列表数据
const tableData = ref<Array<any>>([])

//是否显示add模态框
const showAdd = ref<boolean>(false)

/*========================================>( 作用域值 )<========================================*/
const _ipcs = {
  //获取组标签列表
  getList: () => {
    const { module, value } = window.ipcRenderer.sendSync('STORAGE-GET', { module: 'coc' })
    //如果所属本模块，更新模块设置数据
    if (module == 'coc') {
      tableData.value = value.labels
    }
  },
  add: (name: string) => {
    const labels = [...lodash.cloneDeep(tableData.value), { name, id: createUUID() }]
    window.ipcRenderer.sendSync('STORAGE-SAVE', {
      module: 'coc',
      data: { labels }
    })
    _ipcs.getList()
  },
  rm: (row: any) => {
    proxy?.$modal.confirm(`您确定要删除[${row.name}]标签吗`).then(() => {
      window.ipcRenderer.sendSync('STORAGE-SAVE', {
        module: 'coc',
        data: { labels: lodash.cloneDeep(tableData.value).filter(e => e.id != row.id) }
      })
      _ipcs.getList()
      proxy?.$modal.msgSuccess('删除成功', 80)
    })
  }
}

/*========================================>( 监听方法 )<========================================*/
//监听导航栏菜单点击
const handleBarMenusSelected = (mark: string) => {
  switch (mark) {
    case 'add':
      showAdd.value = true
      break
    default:
      break
  }
}

//监听删除
const handleDelete = (id: string) => {
  _ipcs.rm(id)
}

//监听新增标签
const handleAddSubmit = (labelName: string) => {
  _ipcs.add(labelName);
  proxy?.$modal.msgSuccess('添加成功', 80)
  showAdd.value = false
}

//监听添加框关闭
const handleAddModalClose = () => {
  showAdd.value = false
}

/*========================================>( 钩子 )<========================================*/
onMounted(() => {
  _ipcs.getList()
})

</script>
<template>
  <MenuBar title="标签管理" mid="ModuleCocLables" :logo="{ isIcon: true, value: 'tag' }" :menus="menuBarMenus"
    barColor="#222" hideMinimize hideMaximize @select="handleBarMenusSelected" />
  <div class="main-content labels">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="name" label="标签名称" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddModal v-if="showAdd" @submit="handleAddSubmit" @close="handleAddModalClose" />
  </div>
</template>
<style lang="scss">
.main-content.labels {
  width: 100%;
  height: calc(100% - 40px);
  overflow: hidden;
  background-color: #fff;
  ;
}
</style>
<style lang="scss" scoped></style>